<script lang="ts" setup>
import "@/utils/rem"
import { ref } from "vue"
import { getCollectionH5List } from "@/api/combo-h5"
import { useRouter } from "vue-router"
import { useCommonStore } from "@/store/modules/common" // 公共信息

// import { formatDateTime } from "@/utils"
// import { showToast } from "vant"
const commonStore = useCommonStore() // 公共信息
const router = useRouter()
const phId = ref<any>(router.currentRoute.value.query.p) //合集ID
const TGId = ref<any>(router.currentRoute.value.query.t) //推广人ID
const counts = ref<any>(0)
const list = ref<any>([])
const loading = ref(false)
const finished = ref(false)
const keyWord = ref("")
const topImg = ref("")
const BASEURL = `${import.meta.env.VITE_BASE_API}/image/`

const onLoad = () => {
  setTimeout(() => {
    getCollectionH5List({
      phId: phId.value,
      operator: opt.value,
      name: keyWord.value
    })
      .then((res) => {
        list.value.push(...res.data.list)
        counts.value = res.data.total
        topImg.value = `${BASEURL}${res.data.ph.image}`
        document.title = res.data.ph.name
      })
      .catch(() => {
        list.value = []
      })
    loading.value = false

    if (list.value.length >= counts.value) {
      finished.value = true
    }
  }, 100)
}
const goCreateOrder = (item: any) => {
  router.push(`/productDetil?p=${item.id}&u=${TGId.value}&s=${item.systemId}`)
}
/**END */
defineOptions({
  name: "OrderSearch"
})
//运营商筛选
const active = ref(0)
const opt = ref<any>("")
const typeList = ref(["全部", "电信", "联通", "移动", "广电"])

const changeTabs = (name: any) => {
  list.value = []
  //   console.log(name);
  if (name == 0) {
    opt.value = ""
  }
  if (name == 1) {
    opt.value = 3
  }
  if (name == 2) {
    opt.value = 2
  }
  if (name == 3) {
    opt.value = 1
  }
  if (name == 4) {
    opt.value = 4
  }
  onLoad()
}
const searchCombo = (val: any) => {
  list.value = []
  // console.log(val)
  keyWord.value = val
  onLoad()
}
/**查询团队客服链接 */
import { getEwmUrl } from "@/api/combo-h5"
const serverLink = ref("")
const getEwmPop = () => {
  getEwmUrl({ userId: TGId.value }).then((res: any) => {
    if (res.code == 200) {
      serverLink.value = res.data.serviceLink
    }
  })
}
getEwmPop()
//跳转客服
const toServer = () => {
  if (serverLink.value) {
    window.open(serverLink.value)
  }
}
import { useScrollParent, useEventListener } from "@vant/use"
const root = ref()
const scrollParent = useScrollParent(root)
const isScroll = ref(false)
const timer = ref<any>(null)
useEventListener(
  "scroll",
  () => {
    isScroll.value = true
    if (timer.value) {
      clearTimeout(timer.value)
    }
    timer.value = setTimeout(() => {
      isScroll.value = false
    }, 500)
  },
  { target: scrollParent }
)
</script>
<template>
  <div style="background-color: #f8f8f8; width: 7.5rem; margin: 0 auto" ref="root">
    <div class="title" style="font-size: 0">
      <van-image :src="topImg" width="7.5rem" height="2rem" />
      <van-button
        icon="orders-o"
        type="default"
        size="mini"
        style="vertical-align: middle; position: absolute; right: 0.2rem; top: 0.4rem"
        :to="`/orderSearch?tid=${TGId}`"
        >查询订单</van-button
      >
      <van-button
        icon="point-gift"
        type="primary"
        size="mini"
        style="vertical-align: middle; position: absolute; right: 0.2rem; top: 1.1rem"
        url="https://fx.yunyoutongxin.com/h5?link_verification=linkA11"
        >话费补贴</van-button
      >
      <div @click="toServer" class="online-service" :class="{ 'online-service-scroll': isScroll }">
        <img class="online-service-img" :src="`${commonStore.BASEURL}/images/jqr.gif`" />
        <img class="online-service-txt" :src="`${commonStore.BASEURL}/images/zs.png`" />
      </div>
      <!-- <span class="el-icon-thirdlianxikefu kefu" /> -->
    </div>
    <div class="tabs-box">
      <van-search
        v-model="keyWord"
        shape="round"
        background="#fff"
        placeholder="请输入搜索关键词（如地区：广东）"
        style="padding-bottom: 0"
        @search="searchCombo"
      />
      <van-tabs v-model:active="active" swipeable @change="changeTabs">
        <van-tab v-for="item in typeList" :key="item">
          <template #title>
            <van-button plain type="primary" class="tabs-btn">{{ item }}</van-button>
          </template>
          <div class="list">
            <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
              <van-cell v-for="item in list" :key="item.id" style="margin-bottom: 0.2rem">
                <van-card
                  :desc="item.desc"
                  :thumb="`${BASEURL}${item.heImage}`"
                  :centered="false"
                  @click="goCreateOrder(item)"
                >
                  <template #title>
                    <van-tag plain type="primary" class="tagY" v-if="item.tag">{{ item.tag }}</van-tag>
                    <span style="font-weight: 700">{{ item.name }}</span>
                  </template>
                  <template #bottom>
                    <van-button size="small" color="linear-gradient(180deg,#ff8e75,#ff4747)" round>
                      <van-swipe
                        vertical
                        class="notice-swipe"
                        :autoplay="2000"
                        :touchable="false"
                        :show-indicators="false"
                      >
                        <van-swipe-item>立即申请</van-swipe-item>
                        <van-swipe-item>包邮到家</van-swipe-item>
                      </van-swipe>
                    </van-button>
                  </template>
                </van-card>
              </van-cell>
            </van-list>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.title {
  background-color: #fff;
  // text-align: right;
  // padding: 0.1rem 0.2rem;
  box-sizing: border-box;
}
.list {
  padding: 0.2rem;
  // margin: 0.2rem 0;
}
.notice-swipe {
  width: 1.4rem;
  height: 0.4rem;
  line-height: 0.4rem;
}
:deep(.van-card__content) {
  text-align: left !important;
}
:deep(.van-card) {
  background-color: #fff !important;
}
:deep(.van-cell) {
  border-radius: 0.2rem;
}
.tagY {
  background: linear-gradient(137deg, #fa9d5d, #ff3162);
  border-radius: 2px;
  color: #fff;
  font-size: 10px;
  height: 18px;
  line-height: 18px;
  margin-right: 10px;
  padding: 3px 7px;
  z-index: 9;
}
:deep(.van-card__thumb) {
  width: 2.2rem !important;
  height: 2.2rem !important;
}
:deep(.van-card__bottom) {
  text-align: right;
}
:deep(.van-ellipsis) {
  overflow: initial !important;
  white-space: initial !important;
  text-overflow: initial !important;
}
.tabs-box {
  :deep(.van-button) {
    border: 0 !important;
  }
  :deep(.van-tab .van-button__text) {
    color: #333 !important;
  }
}
.kefu {
  position: fixed;
  right: 0;
  top: 4rem;
  display: inline-block;
  font-size: 36px;
  color: #409eff;
  animation: kefu_a 1.5s infinite;
  z-index: 99;
}
@keyframes kefu_a {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
.online-service {
  align-items: center;
  background: transparent;
  bottom: 67px;
  display: flex;
  flex-direction: column;
  height: 80px;
  justify-content: center;
  position: fixed;
  right: 10px;
  transform: translateZ(0);
  transition: 0.3s;
  width: 64px;
  z-index: 1000;
}
.online-service .online-service-img {
  height: 58px;
  margin-bottom: 2px;
  width: 58px;
}
.online-service .online-service-txt {
  height: 20px;
  width: 64px;
}
.online-service-scroll {
  transform: translate3d(45px, 0, 0) rotate(-45deg);
}
</style>
